<template>
     <el-dialog
          title="选择部门"
          :visible.sync="dialogVisible"
           width="400px"
           class="selectDialog"
           v-dialogDrag
           :close-on-click-modal="false"
           :before-close="handleClose">
               <dept-tree @clickDept="clickNode"/>
               <span class="buttons">
                    <el-button size="small" @click="handleClose">取 消</el-button>
                    <el-button size="small" type="primary" @click="confirm">确 定</el-button>
               </span>
     </el-dialog>
</template>
<script lang="ts">
import { Component, Vue,Prop,Emit} from 'vue-property-decorator';
import CommonUtils from "@/common/utils/common-utils";
import DeptTree from "@/components/dept/dept-tree.vue";
@Component({
  components: {
       DeptTree
  },
})
export default class FormDialog extends Vue {
     @Prop() public data!: any;
     private value:any="";
     private dialogVisible:boolean=true;
     private curNode={};
     async created(){
          this.$nextTick(()=>{
                 CommonUtils.centerDialog();
           });
     }
     @Emit("close")
     private handleClose(){
          this.dialogVisible=false;
     }
     private confirm(){
          this.onConfirm();
          this.handleClose();
     }
     //点击部门树回调函数
     @Emit('clickNode')
     private clickNode(curNode:any){
         this.curNode=curNode;
     }
     //确认
     @Emit('onConfirm')
     private onConfirm(){
          return this.curNode;
     }
}
</script>
<style lang="less">
    .selectDialog{
         .buttons{
               display: flex;
               height: 34px;
               margin-top: 10px;
               justify-content: center;
         }
         .el-input__inner{
               border-color: darkgrey!important;;
         }
    }
</style>
